<script setup>
import {getDataList, getUserInfo, logout} from "@/api/api.js";
import {ElMessage} from "element-plus";
import router from "@/router/router.js";
import {getSessionStr, isEmpty, removeSession, tabFormat} from "@/utils/common.ts";
import {onBeforeMount, reactive} from "vue";
import {List, Message, Present, Unlock, User} from "@element-plus/icons-vue";
import BlackCard from "@/components/card/BlackCard.vue";
import BlackTable from "@/components/table/BlackTable.vue";

let userInfo = reactive({
  nickName: "",
  headUrl: "",
  release: 0,
  collect: 0,
  message: 0,
  lock: true,
  email: "",
});
let pageInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  author: 0
})
const doLogout = () => {
  logout(getSessionStr("token")).then(res => {
    if (res) {
      removeSession("token");
      ElMessage.success("您已安全退出登录");
      router.push("/login");
    }
  })
}
const getUserDetail = () => {
  getUserInfo().then((res) => {
    if (res) {
      userInfo.nickName = res.user.nickName;
      userInfo.email = res.user.email;
      userInfo.lock = res.user.lock;
      if (!isEmpty(res.user.headUrl)) {
        userInfo.headUrl = res.user.headUrl;
      } else {
        userInfo.headUrl = "/img/default_header.png";
      }
      pageInfo.list = res.releaseList;
      pageInfo.author = res.user.id;
      userInfo.release = res.release;
      userInfo.collect = res.collect;
      userInfo.message = res.message;
    } else {
      removeSession("token");
      isLoginValid();
      ElMessage.error("未能获取用户信息");
    }
  });
}
const isLoginValid = () => {
  let token = getSessionStr("token");
  if (isEmpty(token)) {
    ElMessage.warning("请先登录");
    removeSession("token")
    router.push("/login");
    return false;
  }
  return true;
}
const formatter = (row, column, cellValue) => {
  return tabFormat(cellValue);
}
const getMsg = (pageInfo) => {
  getDataList(pageInfo).then(res => {
    pageInfo.total = res.total;
    pageInfo.list = res.list;
  });
}
onBeforeMount(() => {
  if (isLoginValid()) {
    getUserDetail();
  }
})
</script>

<template>
  <div class="view-container">
    <div class="personal-info">
      <div class="hor-container">
        <div style="padding-left: 1em">
          <el-avatar :src="userInfo.headUrl" :size="100"/>
        </div>
        <div class="ver-container">
          <span class="hor-container info-text">
            <el-icon>
              <User/>
            </el-icon>
            {{ userInfo.nickName }}
          </span>
          <div class="hor-container info-text">
            <el-icon>
              <Message/>
            </el-icon>
            {{ userInfo.email }}
          </div>
        </div>
        <div class="ver-container">
        </div>
        <div class="ver-container">
          <el-divider class="msg_divider" direction="vertical"></el-divider>
        </div>
        <div class="ver-container">
          <span class="info-text">发布</span>
          <span class="info-text center-text">{{ userInfo.release }}篇</span>
        </div>
        <div class="ver-container">
          <el-divider class="msg_divider" direction="vertical"></el-divider>
        </div>
        <div class="ver-container">
          <span class="info-text">收藏</span>
          <span class="info-text center-text">{{ userInfo.collect }}篇</span>
        </div>
        <div class="ver-container">
          <el-divider class="msg_divider" direction="vertical"></el-divider>
        </div>
        <div class="ver-container">
          <span class="info-text">消息</span>
          <span class="info-text center-text">{{ userInfo.message }}条</span>
        </div>
        <div class="ver-container">
          <el-divider class="msg_divider" direction="vertical"></el-divider>
        </div>
      </div>
    </div>
    <div class="hor-container">
      <black-card id="my_msg" title="我的发布">
        <black-table :query="getMsg" :page-info="pageInfo">
          <el-table-column style="color: rgb(255, 141, 0)" type="index" label="序号"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="createTime" label="发布时间"></el-table-column>
        </black-table>
      </black-card>
      <!--  TODO 按钮交互 -->
      <black-card id="operate" title="操控台" :body-style="{padding: '1em'}">
        <el-button class="operate-text" link>
          <template #icon>
            <el-icon>
              <Present/>
            </el-icon>
          </template>
          发布
        </el-button>
        <el-divider class="menu_divider"></el-divider>
        <el-button class="operate-text" link>
          <template #icon>
            <el-icon>
              <List/>
            </el-icon>
          </template>
          我的收藏
        </el-button>
        <el-divider class="menu_divider"></el-divider>
        <el-button class="operate-text" link>
          <template #icon>
            <el-icon>
              <Unlock/>
            </el-icon>
          </template>
          修改账户密码
        </el-button>
        <el-divider class="menu_divider"></el-divider>
        <el-button class="operate-text" link>
          <template #icon>
            <el-icon>
              <Message/>
            </el-icon>
          </template>
          修改绑定邮箱
        </el-button>
        <el-divider class="menu_divider"></el-divider>
        <el-button id="logout_btn" @click="doLogout">退出登录</el-button>
      </black-card>
    </div>
  </div>
</template>

<style scoped>
.personal-info {
  width: 100%;
  height: 10em;
  background-size: 100% 100%;
  background-image: url("@/assets/info_background.png");
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-text {
  color: #FFFFFF;
  font-size: 1.5em;
}

/* 让图标与文字在同一水平线并贴合显示 */
.info-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 当与 hor-container 同时使用时，避免两端对齐导致图标与文字分散 */
.info-text.hor-container {
  justify-content: flex-start;
}

.info-text .el-icon {
  display: inline-flex;
  align-items: center;
}

.center-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

.msg_divider {
  height: 7em;
}

#my_msg {
  width: 60%;
}

#operate {
  width: 40%;
}

.operate-text {
  color: rgb(90, 94, 124);
  font-size: 1.5em;
  margin-top: 1em;
}

.menu_divider {
  height: 2em !important;
}

#logout_btn {
  margin-top: 1em;
  color: #fff;
  background-color: rgb(83, 88, 120);
  width: 100%;
  height: 2em;
  border-radius: 2em;
  font-size: 1.5em;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .personal-info {
    height: auto;
    padding: 1em 0;
  }
  
  .personal-info .hor-container {
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }
  
  .personal-info .ver-container {
    align-items: center;
  }
  
  .msg_divider {
    display: none;
  }
  
  .info-text {
    font-size: 1.2em;
    justify-content: center;
  }
  
  #my_msg,
  #operate {
    width: 100%;
  }
  
  .operate-text {
    font-size: 1.2em;
  }
  
  #logout_btn {
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .personal-info {
    padding: 0.5em 0;
  }
  
  .info-text {
    font-size: 1em;
  }
  
  .operate-text {
    font-size: 1em;
  }
  
  #logout_btn {
    font-size: 1em;
  }
  
  .el-avatar {
    width: 80px !important;
    height: 80px !important;
  }
}
</style>